<template>
  <div class="refund-wrap">
    <G_header title="商品" fixed />
    <div class="goods-wrap plank" v-if=" is_step == 0">
      <van-row>
        <van-col offset="1" span="5">
          <van-image width="65" height="65" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        </van-col>
        <van-col span="18">
          <div class="goods-title">
            <p>商品阿萨德看见爱上大可视对讲哈萨克较大灰色空间按时，短时看到就</p>
          </div>
          <div class="goods-spec">
            <p style="color: #C0C4CC">颜色分类: diyisad奥术大师大</p>
          </div>
        </van-col>
      </van-row>
    </div>

    <van-cell-group>
      <van-cell
        icon="refund-o"
        title="我要退款(无需退货)"
        label="没收到货或与卖家协商同意不用退货只退款"
        ref="dataType"
        @click="getType(1)"
      />
      <van-cell icon="refund-o" title="我要退货退款" label="已收到货,需要退还收到的货物" @click="getType(2)" />
    </van-cell-group>

    <van-cell-group v-if="is_step == 1">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="货物状态" name="1" :value="titleStatus">
          <van-radio-group v-model="radio">
            <van-cell-group>
              <van-cell title="未收到货" clickable @click="radioType(1,'未收到货')">
                <van-radio slot="right-icon" name="1" />
              </van-cell>
              <van-cell title="已收到货 " clickable @click="radioType(2,'已收到货')">
                <van-radio slot="right-icon" name="2" />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-collapse-item>
      </van-collapse>

      <van-collapse v-model="activeNames2">
        <van-collapse-item title="退款原因" name="1" :value="titleStatus2">
          <van-radio-group v-model="radio2">
            <van-cell-group>
              <van-cell title="商品描述不符" clickable @click="radioType2(1,'商品描述不符')">
                <van-radio slot="right-icon" name="1" />
              </van-cell>
              <van-cell title="质量问题 " clickable @click="radioType2(2,'质量问题')">
                <van-radio slot="right-icon" name="2" />
              </van-cell>
              <van-cell title="做工粗糙/有瑕疵" clickable @click="radioType2(3,'做工粗糙/有瑕疵')">
                <van-radio slot="right-icon" name="3" />
              </van-cell>
              <van-cell title="漏发" clickable @click="radioType2(4,'漏发')">
                <van-radio slot="right-icon" name="4" />
              </van-cell>
              <van-cell title="破损/变形/裂痕/污渍" clickable @click="radioType2(5,'破损/变形/裂痕/污渍')">
                <van-radio slot="right-icon" name="5" />
              </van-cell>
              <van-cell title="发错货" clickable @click="radioType2(6,'发错货')">
                <van-radio slot="right-icon" name="6" />
              </van-cell>
              <van-cell title="其他" clickable @click="radioType2(7,'其他')">
                <van-radio slot="right-icon" name="7" />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-collapse-item>
      </van-collapse>
    </van-cell-group>

    <van-cell-group>
      <div style="padding:10px 16px;box-sizing: border-box;color: #323233font-size: 14px;line-height: 24px;">退款金额: {{22.00}}</div>
      <van-field v-model="caption" required clearable label="退款说明" placeholder="选填" />
    </van-cell-group>
    <van-cell-group>
      <div style="padding:10px 16px;box-sizing: border-box;color: #323233font-size: 14px;line-height: 24px;">上传凭证</div>
    </van-cell-group>
    <van-button type="primary" size="large">提交</van-button>
  </div>
</template>

<script>
export default {
  name: "Refund",
  data() {
    return {
      title: "选择服务类型",
      is_step: 1,
      activeNames: ["0"],
      activeNames2: ["0"],
      radio: false,
      radio2: false,
      titleStatus: "请选择货物状态",
      titleStatus2: "请选择退款原因",
      caption:''
    };
  },
  methods: {
    navBack() {
      this.$router.go(-1);
    },
    getType(e) {
      console.log(e);
    },
    radioType(e, title) {
      this.radio = e.toString();
      this.titleStatus = title;
      this.activeNames = ["0"];
    },
    radioType2(e, title) {
      this.radio = e.toString();
      this.titleStatus2 = title;
      this.activeNames2 = ["0"];
    }
  }
};
</script>
<style scoped>
.goods-title p {
  margin: 0;
  padding-right: 12px;
}
.goods-spec p {
  margin: 0.1rem 0;
  padding-right: 12px;
}
</style>
